<template>
    <el-dialog
    title="导学案/课件详情"
    v-model="state.visible"
    width="800px"
    >
        <div>
          <iframe :src="state.officeUrl" width="100%" height="600"></iframe>
        </div>

      <template #footer>       
        <el-button @click="state.visible = false">关 闭</el-button>     
      </template>
    </el-dialog>
  </template>
  
  <script setup>
    import { Base64 } from 'js-base64';
    import { reactive, onMounted, ref } from 'vue'
    import { onlinePreview } from '@/utils'
    const props = defineProps({
      file: String,
    })
    const state = reactive({
      visible: false,     //控制本组件的对话框显示和隐藏
      file:'',
      officeUrl:''
    });
    // 开启弹窗
    const open = (file) => {
      console.log("open的参数", file)
      state.visible = true
      state.file = file
      // state.officeUrl = `https://juhagen.vicp.cc/onlinePreview?url=`+ encodeURIComponent(Base64.encode(state.file))
      window.open(onlinePreview + encodeURIComponent(Base64.encode(state.file)));
    };
    // 关闭弹窗
    const close = () => {
      state.visible = false
    };
    // 将需要暴露出去的数据与方法都可以暴露出去
    defineExpose({ open, close })
  </script>